<template>
  <div>
    <h1>商品展示</h1>
    <table border="1">
        <tr>
           <th>商品封面</th>
           <th>商品ID</th>
           <th>商品名称</th>
           <th>商品价格</th>
           <th>商品分类</th>
        </tr>
        <tr v-for="good in goods" :key="good.id">
            <td>
               <img :src="src + good.img" alt="" width="88">
            </td>
            <td>{{good.id}}</td>
            <td>{{good.name}}</td>
            <td>{{good.pirce}}</td>
            <td>{{good.cate}}</td>
        </tr>
    </table>
    <br>
        <button @click="up">上一页</button>
        <button v-for="p in page_list" :key="p" @click="jum(p)">{{p}}</button>
        <button @click="down">下一页</button>
  
   
</div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            src:'http://127.0.0.1:8000/uploads',
            base_url:"http://127.0.0.1:8000",
            num:1,
            cate_list:[],
            page_list:[],
            page_sum:0,
            goods:{}
        }
    },
    methods: {
        down(){
            if(this.num<=this.page_sum){
                this.num ++
                this.get_cate()
            }
        },
        up(){
            if(this.num>1){
                this.num --
                this.get_cate()
            }
        },
        jum(p){
            this.num = p
            this.get_cate()
        },
    },
    created() {
         this.axios({
            url: this.base_url + '/app01/goods_api',
            method:'get',
        }).then(res=>{
            console.log(res.data)
            this.goods = res.data
        }).catch(error=>{
            console.log(error)
        })
    }
}
</script>

<style>
table{
    width: 500px;
    /* height: 500px;  */
    border: solid black;
    margin: 0 auto;
    border-collapse:collapse
}
th,td{
    border: green solid;
    border-collapse:collapse
}
a{
    padding: 5px 10px;
    border: 1px solid lightblue;
    margin-right: 10px;
    cursor: pointer;
}
</style>